<template>
  <el-main style="height: 930px">

    <div>
      <div class="block">
        <span class="demonstration">请选择查询的起止时间</span>
        <el-date-picker
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getRecord">
        </el-date-picker>
      </div>
      <el-table
        :data="workRecord.infos"
        :cell-style="{textAlign:'center'}"
        :header-cell-style="{textAlign:'center'}"
        style="width: 851px;position: relative;left: 200px;top: 120px"
        border
        empty-text="无"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading">
        <el-table-column
          prop=""
          label="订单种类"
          width="250px"
          text-align: center>
          <template slot-scope="scope">
            <el-tag
              :type="scope.$index===0?'success':scope.$index===1?'danger'
              :'info'">
              {{
                scope.$index === 0 ? '新订' : scope.$index === 1 ? '退订'
                  : scope.$index === 2 ? '换货' : '退货'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          label="订单数量"
          sortable="true"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="运输商品总数"
          sortable="true"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="订单总额"
          sortable="true"
          width="200px">
        </el-table-column>
      </el-table>
    </div>

  </el-main>
</template>

<script>
import axios from 'axios';

export default {
  name: "WorkRecord",
  data() {
    return {
      workRecord: {
        infos: [{
          orderType: 0,
          count: 0,
          amount: 0,
          quantity: 0
        }
        ]
      },
      loading: false,
      operatorName: 'admin',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      date: []
    }
  },
  methods: {
    getRecord() {
      this.loading = true
      axios.get('http://localhost:8085/order/workRecord/' + this.operatorName + '?start=' + this.getFormat(this.date.at(0)) + '&end=' + this.getFormat(this.date.at(1))).then(res => {
        const httpCode = res.data.code
        if (httpCode === 1) {
          console.log(res)
          this.workRecord = res.data.data
          console.log(res.data.data)
          this.loading = false
        } else {
          this.$message.error('系统错误')
          this.loading = false
        }
      }).catch(err => {
        this.loading = false;
      });
    },
    getFormat(originalDateString) {
      // 创建一个 Date 对象
      const date = new Date(originalDateString);

      // 获取年、月、日
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从 0 开始，所以要加 1，然后补 0
      const day = ("0" + date.getDate()).slice(-2); // 补 0
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      // 转换为 yyyy-MM-dd 格式
      return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
    }
  },
  mounted() {
    // this.loading=true;
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.date = [start, end]
    this.getRecord()
    //
    // this.getByPage()
  }

}
</script>

<style scoped>


</style>
